@keyframes fadeInUp {
  0% {
    transform: translate3d(0, 100%, 0);
  }

  to {
    transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    transform: translate3d(100%, 0, 0);
  }

  to {
    transform: none;
  }
}

@keyframes fadeInLeft {
  0% {
    transform: translate3d(-100%, 0, 0);
  }

  to {
    transform: none;
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}

.pageInLeft {
  animation-name: fadeInLeft;
}

.pageInRight {
  animation-name: fadeInRight;
}

.pageOutLeft {
  animation-name: fadeOutLeft;
}

.pageOutRight {
  animation-name: fadeOutRight;
}
